<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <!-- 
  创建Vue实例，初始化渲染
  1. 准备容器 (Vue所管理的范围)
  2. 引包 (开发版本包 / 生产版本包) 官网
  3. 创建实例
  4. 添加配置项 => 完成渲染
-->

  <!-- 不是Vue管理的范围 -->
  <div class="box2">
  </div>
  <div class="box">

  </div>
  -----------------------------------------------------
  <!-- Vue所管理的范围 -->
  <div id="app">
    {{msg}}
    <!-- {{msg}} -->
    <!-- 这里将来会编写一些用于渲染的代码逻辑 -->
  </div>

  <!-- 引入的是开发版本包 - 包含完整的注释和警告 -->
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.14/vue.js"></script>

  <script>
    // 一旦引入 VueJS核心包，在全局环境，就有了 Vue 构造函数
    // const app = new Vue({
    //   el: '#app',//el指定挂载点，选择器指定控制的是哪个盒子
    //   data: {//data 提供数据
    //     msg: '3'
    //   }
    // })

    new Vue({
      el: '#app', // 挂载容器 构建用户界面
      data: {
        msg: 'xixi',
      }
    })
  </script>


</body>

</html>